.input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    background-color: transparent;
    color: $input-text;
    margin-right: $space-xxs;
    padding: $space-s 0 $space-s $space-xs;
    font: inherit;
    line-height: 24px;

    &::placeholder {
        color: $input-placeholder;
    }
    &:disabled {
        color: $input-text-disabled;
    }
    &:focus {
        color: $input-text-focus;
    }

    &-container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
        height: 52px;
        border: 1px solid $input-border;
        border-radius: $border-radius;
        overflow: hidden;
        background-color: $input-bg;

        &:has(input:focus) {
            border-color: $input-border-focus;
            background-color: $input-bg-focus;
        }

        &:has(input:disabled) {
            border-color: $input-border-disabled;
            background-color: $input-bg-disabled;
        }

        &:has(:nth-child(2)) {
            padding-right: $space-xs;
        }
    }
}
